<template>
  <div class="app-container">
    <div class="mt20">
      <el-form :inline="true" :model="formInline">
        <el-form-item label="用户名">
          <el-input v-model="formInline.username" clearable placeholder="输入用户名" />
        </el-form-item>
        <el-form-item>
          <el-button @click="search()">查询</el-button>
          <el-button type="primary" @click="handleDialog()">添加用户</el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-table v-loading="listLoading" :data="list" element-loading-text="Loading" border fit highlight-current-row>
      <el-table-column label="用户名" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.username }}</span>
        </template>
      </el-table-column>
      <el-table-column label="真实姓名" align="center">
        <template slot-scope="scope">
          {{ scope.row.realName }}
        </template>
      </el-table-column>
      <el-table-column label="邮箱" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.email }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="240" align="center">
        <template slot-scope="scope">
          <el-button type="text" icon="el-icon-edit" @click="handleDialog(scope.row)">修改</el-button>
          <el-button type="text" class="c-red" @click="del(scope.row)">删除</el-button>
          <el-button type="text" @click="roleDialog(scope.row)">分配角色</el-button>
          <el-button type="text" @click="restPwd(scope.row)">重置密码</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-row class="pagination-container">
      <el-pagination :current-page="currentPage" :total="listCount" :page-sizes="[10, 20, 30, 40]" :page-size="10" layout="total, sizes, prev, pager, next, jumper" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
    </el-row>

    <el-dialog :title="dialogTitle" :close-on-click-modal="false" width="450px" :visible.sync="showDialog" @close="reset">
      <el-form ref="form" :model="ruleForm" :rules="rules" label-width="100px" status-icon>
        <el-form-item label="用户名" prop="username">
          <el-input v-model="ruleForm.username" placeholder="请输入用户名" />
        </el-form-item>
        <el-form-item v-if="dialogTitle !== '编辑用户'" label="密码" prop="password">
          <el-input v-model="ruleForm.password" placeholder="请输入密码" />
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="ruleForm.email" placeholder="请输入邮箱" />
        </el-form-item>
        <el-form-item label="姓名" prop="realName">
          <el-input v-model="ruleForm.realName" placeholder="请输入姓名" />
        </el-form-item>
        <el-form-item label="电话" prop="phone">
          <el-input v-model="ruleForm.phone" placeholder="请输入电话" />
        </el-form-item>
        <el-form-item label="性别" prop="sex">
          <el-select v-model="ruleForm.sex" clearable placeholder="请选择性别">
            <el-option label="男" :value="1" />
            <el-option label="女" :value="2" />
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="showDialog = false">取 消</el-button>
        <el-button type="primary" @click="doSave()">确 定</el-button>
      </div>
    </el-dialog>
    <dialog-box ref="dialog" />
  </div>
</template>
<script>
import { handleParam } from '@/utils/index'
import pattern from '@/utils/pattern.js'
import { pagination } from '@/mixins/index'
import dialogBox from './components/choiceRoleDialog.vue'
export default {
  components: {
    dialogBox
  },
  mixins: [pagination],
  data() {
    return {
      list: null,
      listCount: 1,
      listLoading: true,
      formInline: { username: '' },
      ruleForm: {
        username: '',
        password: '',
        email: '',
        realName: '',
        phone: '',
        sex: '',
        roles: ''
      },
      rules: {
        username: [{ required: true, message: '必填项', trigger: 'blur' }],
        password: [{ required: true, message: '必填项', trigger: 'blur' }],
        email: [{ required: true, message: '必填项', trigger: 'blur' }, pattern.email],
        phone: [{ required: true, message: '必填项', trigger: 'blur' }, pattern.mobile]
      },
      showDialog: false,
      dialogTitle: ''
    }
  },
  created() {
    this.getData()
  },
  methods: {
    getData() {
      this.listLoading = true
      this.$http.request({
        url: `/user/list/${this.page}/${this.limit}?${handleParam(this.formInline)}`,

        data: {},
        tokenRefresh: () => this.getData()
      }).then(res => {
        const { list, total } = res.pageInfo
        this.list = list
        this.listCount = total
        this.listLoading = false
      })
    },
    handleDialog (row) {
      if (row) {
        this.dialogTitle = '编辑用户'
        this.ruleForm = Object.assign({}, row)
      } else {
        this.dialogTitle = '新增用户'
        this.ruleForm = {}
      }
      this.showDialog = true
    },
    doSave () {
      this.$refs.form.validate(valid => {
        if (!valid) {
          return
        }
        const data = Object.assign({}, this.ruleForm)
        this.$http.request({
          method: !data.uid ? 'post' : 'put',
          url: !data.uid ? `/user` : `/user/${data.uid}`,

          data: JSON.stringify(data)
        }).then(() => {
          this.$message.success('保存成功')
          this.showDialog = false
          this.getData()
        })
      })
    },
    roleDialog (row) {
      const dialog = this.$refs.dialog
      dialog.dialogFormVisible = true
      dialog.uid = row.uid
      this.$nextTick(() => {
        dialog.getData()
      })
    },
    restPwd (row) {
      this.$http.request({
        method: 'put',
        url: `/user/rest/${row.uid}`,

        data: {}
      }).then(() => {
        this.$message.success('重置成功')
        this.getData()
      })
    },
    search () {
      this.page = 1
      this.limit = 10
      this.getData()
    },
    reset () {
      this.$refs.form.resetFields()
    },
    del (row) {
      this.$confirm('是否删除该数据?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$http.request({
          method: 'delete',
          url: `/user/detete/${row.uid}`,

        }).then(res => {
          this.$message.success('删除成功')
          this.getData()
        })
      }).catch(() => {})
    }
  }
}
</script>
